<template>
  <div class="fx-radio" @click="radioClick"
       :class="[{active:activeClass,disabled:(radioGroupDisabled||disabled),border},radioGroupSize&&radioGroupSize!==''?radioGroupSize:size]">
    <div class="fx-radio-select-box">
      <input type="radio" hidden :name="currentRadioValue" :value="label">
    </div>
    <div class="fx-radio-label">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, inject, onMounted, PropType, Ref, ref, SetupContext } from 'vue'
import { ComponentSize, componentSizeArr } from '@/base/types'
import { Emitter } from 'mitt'
import { useModelWatch } from '@/base/hooks'
import { RadioModelValue } from '@/base/radio/radioGroup.vue'

interface RadioProps {
  modelValue: RadioModelValue,
  label: RadioModelValue,
  disabled: boolean,
  size: ComponentSize,
  border: boolean
}

export default defineComponent({
  name: 'FRadio',
  props: {
    // v-model
    modelValue: {
      type: [String, Number, Object, Boolean] as PropType<RadioModelValue>,
      default: ''
    },
    // 选项
    label: {
      type: [String, Number, Object, Boolean] as PropType<RadioModelValue>,
      required: true
    },
    // 禁用
    disabled: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    // 大小
    size: {
      type: String as PropType<ComponentSize>,
      default: 'default',
      validator (val: ComponentSize): boolean {
        return componentSizeArr.includes(val)
      }
    },
    // 边框
    border: {
      type: Boolean as PropType<boolean>,
      default: false
    }
  },
  emits: ['update:modelValue', 'change'],
  setup (props: RadioProps, ctx: SetupContext) {
    // 获取来自radioGroup emit
    const radioGroupEmit = inject<Emitter['emit'] | undefined>('radioGroupMittEmit', undefined)
    // 获取来自radioGroup 选中
    const radioGroupValue = inject<Ref<string> | undefined>('radioGroupValue', undefined)
    // 获取来自radioGroup 禁用
    const radioGroupDisabled = inject<boolean>('radioGroupDisabled', false)
    // 获取来自radioGroup 禁用
    const radioGroupValueKey = inject<string>('radioGroupValueKay', '')
    // 获取来自radioGroup 大小
    const radioGroupSize = inject<Ref<string> | undefined>('radioGroupSize', undefined)
    // 当前选中
    const currentRadioValue = ref<RadioModelValue>(props.modelValue)
    // 数据双向绑定hook
    useModelWatch<RadioModelValue>(() => props.modelValue, currentRadioValue)
    // 接收formItem mitt 监听器
    const formItemMitt = inject<Emitter['emit'] | undefined>('formItemMitt', undefined)
    // 选中状态class
    const activeClass = computed(() => {
      if (radioGroupValue?.value) {
        if (typeof radioGroupValue.value === 'object' && typeof props.label === 'object' && radioGroupValueKey) {
          return radioGroupValue.value[radioGroupValueKey] === props.label[radioGroupValueKey]
        } else {
          return props.modelValue === props.label || radioGroupValue.value === props.label
        }
      } else {
        if (typeof props.modelValue === 'object' && typeof props.label === 'object' && radioGroupValueKey) {
          return props.modelValue[radioGroupValueKey] === props.label[radioGroupValueKey]
        } else {
          return props.modelValue === props.label
        }
      }
    })
    // 单选点击
    const radioClick = (): void => {
      if (props.disabled || radioGroupDisabled) return
      // 当存在radioGroup父级时生效
      if (radioGroupEmit) radioGroupEmit('radioGroupClick', props.label)
      currentRadioValue.value = props.label
      ctx.emit('change', props.label)
      // 发送当前的数据给formItem
      if (formItemMitt) formItemMitt('formItemValue', currentRadioValue.value)
    }

    onMounted(() => {
      // 发送当前的数据给formItem
      if (formItemMitt) formItemMitt('formItemValue', currentRadioValue.value)
    })

    return {
      activeClass,
      radioGroupSize,
      radioGroupValue,
      currentRadioValue,
      radioGroupDisabled,
      radioClick
    }
  }
})
</script>
